<template>
  <div class="head">
    <div class="head_a" v-show="backupTransTicket.transTickets.length" >
      <input type="checkbox" v-model="isOneWay"/>
      直达
    </div>
    <el-dropdown size="medium" style="color: black ; z-index: 1800;">
      <span
        class="el-dropdown-link"
        :class="companyColor"
        style="font-size: 16px; margin-left: 25px; z-index: 1800;"
      >
        航空公司
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-checkbox-group v-model="defaultCompany" @change="companyFilter">
            <el-dropdown-item
              v-for="(item, index) in company"
              :disabled="false"
              :key="index"
            >
              <el-checkbox :label="item.company">
                <img
                  :src="item.companyLogos"
                  style="
                    height: 13px;
                    width: 13px;
                    margin-left: 5px;
                    margin-right: 5px;
                  "
                />{{ item.company }}</el-checkbox
              >
            </el-dropdown-item>
          </el-checkbox-group>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <div class="head_b" @click="sort(0)" :class="color[0]">低价优先</div>
    <div class="head_b" @click="sort(1)" :class="color[1]">起飞早-晚</div>
    <div class="head_b" @click="sort(2)" :class="color[2]">起飞晚-早</div>
    <div class="head_b" @click="sort(3)" :class="color[3]">耗时短-长</div>
    <div class="head_b" @click="sort(4)" :class="color[4]">耗时长-短</div>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  getCurrentInstance,
  defineProps,
  watch,
  defineExpose,
} from "vue";

const porps = defineProps({
  ticket: {
    type: Object,
    default: {tickets:[]}
  },
  transTicket: {
    type: Object,
    default: {transTickets:[]}
  },
}) 
const isOneWay = ref(false)
const defaultCompany = ref([])
const company = ref([])
const color = reactive(["head_b_bakg", "", "", "", ""]);
const companyColor = ref();
const currentSort = ref(0) 
const backupTicket = reactive({tickets:[]})
const backupTransTicket = reactive({transTickets:[]})

//航空公司筛选
let companyFilter = (index) => {
  companyColor.value = "";
  porps.ticket.tickets = backupTicket.tickets;
  porps.transTicket.transTickets = backupTransTicket.transTickets;
  if (index.length) {
    companyColor.value = "company_color";
    porps.ticket.tickets = porps.ticket.tickets.filter((item) => {
      let isAre = false;
      index.forEach((value) => {
        if (item.company == value) {
          isAre = true;
          return;
        }
      });
      return isAre;
    });
    porps.transTicket.transTickets =
      porps.transTicket.transTickets.filter((item) => {
        let isAre = false;
        index.forEach((value) => {
          if (
            item.tickets[0].company == value ||
            item.tickets[1].company == value
          ) {
            isAre = true;
            return;
          }
        });
        return isAre;
      });
  }
  sort(currentSort.value)
};
//排序方法
const sort = (index) => {
  currentSort.value = index
  color.forEach((e, index) => {
    color[index] = "";
  });
  color[index] = "head_b_bakg";
  switch (index) {
    case 0:
      porps.ticket.tickets.sort((a, b) => {
        return parseInt(a.discountPrice) - parseInt(b.discountPrice);
      });
      porps.transTicket.transTickets.sort((a, b) => {
        return (
          a.tickets[0].discountPrice +
          a.tickets[1].discountPrice -
          (b.tickets[0].discountPrice + b.tickets[1].discountPrice)
        );
      });
      break;
    case 1:
      porps.ticket.tickets.sort((a, b) => {
        return (
          conversion(a.startTime) - conversion(b.startTime)
        );
      });
      porps.transTicket.transTickets.sort((a, b) => {
        return (
          conversion(a.tickets[0].startTime) -
          conversion(b.tickets[0].startTime)
        );
      });
      break;
    case 2:
      porps.ticket.tickets.sort((a, b) => {
        return (
          conversion(b.startTime) - conversion(a.startTime)
        );
      });
      porps.transTicket.transTickets.sort((a, b) => {
        return (
          conversion(b.tickets[0].startTime) -
          conversion(a.tickets[0].startTime)
        );
      });
      break;
    case 3:
      porps.ticket.tickets.sort((a, b) => {
        return conversion(a.sailingTime) - conversion(b.sailingTime);
      });
      porps.transTicket.transTickets.sort((a, b) => {
        return consuming(a.tickets) - consuming(b.tickets);
      });
      break;
    case 4:
      porps.ticket.tickets.sort((a, b) => {
        return conversion(b.sailingTime) - conversion(a.sailingTime);
      });
      porps.transTicket.transTickets.sort((a, b) => {
        return consuming(b.tickets) - consuming(a.tickets);
      });
      break;
  }
};
//时间转换
const conversion = (time) => {
  let arr = time.split(":");
  return parseInt(arr[0]) * 60 * 60 + parseInt(arr[1]) * 60 + arr[2];
};
//计算中转耗时
const consuming = (tickets)=>{
  let startDate = new Date(tickets[0].startDate.replace(/-/g, "/") + ' ' + tickets[0].startTime).getTime()
  //算出第二张机票的降落日期
  let startTime = parseInt(tickets[1].startTime.slice(0, 2))
  let endTime = parseInt(tickets[1].endTime.slice(0, 2))
  let endDate = new Date(tickets[1].startDate.replace(/-/g, "/") + ' ' + tickets[1].endTime).getTime()
  endDate = startTime <= endTime ? endDate : endDate + (1000 * 60 * 60 * 24)
  return endDate
}
watch(()=>porps.ticket.version, (newValue, oldValue) => {
  company.value = [];
  defaultCompany.value = []
  companyColor.value = "";
  isOneWay.value = false;
  backupTicket.tickets = porps.ticket.tickets
  backupTransTicket.transTickets = porps.transTicket.transTickets
  color.forEach((e, index) => {
    color[index] = "";
  });
  color[0] = "head_b_bakg"

  //将不同的航空公司放入(直达)
  backupTicket.tickets.forEach((item) => {
    let isRepeat = false;
    company.value.forEach((company) => {
      if (company.company == item.company) {
        isRepeat = true;
      }
    });
    if (!isRepeat) {
      company.value.push({
        company: item.company,
        companyLogos: item.companyLogos,
      });
    }
  });
  //将不同的航空公司放入(中转)
  backupTransTicket.transTickets.forEach((item)=>{
    item.tickets.forEach((item)=>{
        let isRepeat = false
        company.value.forEach(company=>{
            if(company.company==item.company){
                isRepeat = true
            }
        })
        if(!isRepeat){
            company.value.push({company:item.company,companyLogos:item.companyLogos}) 
        }
    })
  })
  //是否是从首页推荐进来的
  if (sessionStorage.getItem("company")) {
    defaultCompany.value = [sessionStorage.getItem("company")]
    companyFilter([sessionStorage.getItem("company")])
    sessionStorage.setItem("company",'')
    isOneWay.value = true
  }
});

defineExpose({ isOneWay, })
</script>

<style scoped>

.head {
  margin: 0 auto;
  margin-bottom: 5px;
  width: 1300px;
  height: 65px;
  background-color: rgba(242,246,252, 0.3);
  box-shadow: var(--el-box-shadow-dark);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: flex;
  align-items: center;
}
.head_a {
  margin-left: 30px;
}
.head_b {
  margin-left: 30px;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.head_b_bakg {
  color: rgb(91, 148, 255);
}
.head_b:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
.company_color {
  color: rgb(91, 148, 255);
}
</style>